<template>
	<view class="box">
		<!-- 头部 -->
		<view class="top">个人地址管理</view>
		<!-- 没有地址 -->
		<view v-show="active" class="noCommodity">
			<image src="/static/my/noAddress.png"></image>
		</view>
		<!-- 有地址 -->
		<view class="address-management">
			<!-- 每个地址卡片 -->
			<view class="address-item" v-for="item in searchResult" :key="item.id">
				<!-- 地址线 -->
				<view class="line">
					<image src="/static/my/line.jpg"></image>
				</view>
				<!-- 地址信息 -->
				<view class="item-info">
					<!-- 地址详情信息 -->
					<view class="addr-info">
						<view class="addr-name-phone">
							<view class="name">收货人：{{ item.name }}</view>
							<view class="phone">手机号： {{ item.tel }}</view>
						</view>
						<view class="addr-diqu">省份城市：{{ item.province }} {{ item.city }} {{ item.county }}</view>
						<view class="addr-detail">详情地址：{{ item.addressDetail }}</view>
					</view>
					<!-- 设置地址操作 -->
					<view class="set-addr">
						<!-- 设置默认 -->
						<view class="radio" @click="set(item.address_id)">
							<van-radio-group v-model="checked">
								<van-radio :name="item.id ">设置默认</van-radio>
							</van-radio-group>
						</view>
						<!-- 编辑和删除 -->
						<view class="acea-row">
							<view class="edit" @click="addr_edit">
								<van-icon name="records" />
								<view class="font">编辑</view>
							</view>
							<view class="delete" @click="addr_delete(item.address_id)">
								<van-icon name="delete-o" />
								<view class="font">删除</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 添加地址 -->
		<view class="footer">
			<!-- 添加地址按钮 -->
			<van-cell class="addressBnt" title="添加新地址" @click="show=true" />
			<van-popup v-model:show="show" style="border-radius: 10px;width: 650rpx;">
				<!-- 添加地址 -->
				<view class="addr-font">
					<van-tag plain type="primary" size="large">添加新地址</van-tag>
				</view>
				<!-- 添加地址组件 -->
				<van-address-edit :area-list="areaList" show-set-default show-search-result
					:area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" />
			</van-popup>
		</view>
	</view>
</template>

<script>
	import {
		AddressEdit,
	} from 'vant';
	// 导入省市区三级数据
	import {
		areaList
	} from "@vant/area-data";
	// 导入api
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				// 是否设置默认地址
				checked: 0,
				// 判断地址是否为空
				active: false,
				show: false, // 是否显示添加地址
				// 省市县列表
				areaList: areaList,
				// 地址列表
				searchResult: [], // 用户收货地址
				// 收货地址信息
				addrInfo: {
					name: "", // 姓名
					tel: "", // 手机号
					province: "", // 省份
					city: "", // 城市
					county: "", // 镇
					areaCode: "", // 城镇码
					country: "",
					addressDetail: "", // 详细地址
					isDefault: "" // 是否默认
				}
			}
		},
		methods: {
			// 判断当前设置默认的地址
			isDefaultAddr(addrList) {
				return addrList.find(item => item.isDefault == "true");
			},
			// 获取时候地址
			getAddress() {
				api.getAddress().then(res => {
					// 获取失败
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err);
						// 1.8秒跳转登录页面
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/user/login/login",
							})
						}, 1800);
						return;
					}
					// 获取成功
					this.searchResult = res.data.data.info;
					// 判断地址是否为空
					this.active = res.data.data.info == false ? true : false;
					// 判断当前设置默认的地址
					this.checked = this.isDefaultAddr(res.data.data.info) ? this.isDefaultAddr(res.data.data.info)
						.id : 0;
					uni.$showMsg(res.data.msg);
				})
			},
			// 保存地址接口
			address(e) {
				api.address(e).then(res => {
					// 添加失败
					if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
					// 添加成功
					uni.$showMsg(res.data.msg);
					setTimeout(() => {
						// 修改成功刷新一下
						location.reload();
					}, 2000);
				})
			},
			// 保存地址
			onSave(e) {
				this.addrInfo = e;
				// 调用添加地址接口
				this.address(e);
			},
			// 设置默认地址
			set(addrId) {
				// 调用修改接口
				api.setDetail({
					id: this.checked,
					address_id: addrId,
				}).then(res => {
					// 修改失败
					if (res.data.status != 200) uni.$showMsg(res.data.data.err);
				})
			},
			// 删除地址
			addr_delete(addrId) {
				api.deleteAddr({
					address_id: addrId
				}).then(res => {
					// 删除失败
					if (res.data.status != 200) uni.$showMsg(res.data.data.err);
					// 删除成功
					uni.$showMsg(res.data.msg);
					setTimeout(() => {
						// 修改成功刷新一下
						location.reload();
					}, 2000);
				})
			},
			// 编辑地址
			addr_edit() {
				uni.$showMsg("暂不支持修改地址操作！");
			}
		},
		onLoad() {
			// 设置地址管理页面title
			uni.setNavigationBarTitle({
				title: "地址管理"
			});
			// 获取收货地址
			this.getAddress();
		}
	}
</script>

<style>
	.box {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* 头部 */
	.top {
		width: 100%;
		height: 100rpx;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
	}

	/* 没有地址 */
	.noCommodity {
		border-top: 3px solid #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.noCommodity image {
		width: 220px;
		height: 179px;
		margin: 16px auto 16px auto;
	}

	/* 添加地址 */
	.footer {
		width: 100%;
		height: 56px;
		box-sizing: border-box;
	}

	/* 添加地址按钮 */
	.footer .addressBnt {
		margin: 0 auto;
		width: 640rpx;
		border-radius: 26px;
		text-align: center;
		font-size: 14px;
		color: #fff;
		background-color: rgba(29, 176, 252, 1);
	}

	.addr-font {
		margin: 0rpx auto;
		padding-top: 40rpx;
		width: 86px;
		height: 25px;
	}

	/* 有地址 */
	.address-management {
		margin-top: 30rpx;
	}

	/* 地址线 */
	.address-management .line {
		margin: 0 auto;
		width: 650rpx;
		height: 1px;
	}

	.address-management .line image {
		width: 650rpx;
		height: 100%;
		display: block;
		overflow: hidden;
		position: relative;
	}

	/* 地址信息 */
	.item-info {
		margin: 30rpx auto;
		width: 650rpx;
		height: 100%;
		background-color: #fff;
	}

	/* 地址详情信息 */
	.item-info .addr-info {
		padding: 16px 0;
		border-bottom: 1px solid #eee;
		font-size: 14px;
		color: #282828;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.addr-name-phone {
		font-weight: 600;
		padding: 0 30rpx;
		display: flex;
	}

	.phone {
		margin-left: 30rpx;
	}

	.addr-diqu {
		padding: 15rpx 30rpx;
		font-size: 13px;
	}

	.addr-detail {
		padding: 0rpx 30rpx;
		font-size: 13px;
	}

	/* 设置地址操作 */
	.item-info .set-addr {
		padding: 0rpx 30rpx;
		height: 44px;
		font-size: 14px;
		color: #282828;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 编辑和删除 */
	.acea-row {
		display: flex;
	}

	.acea-row .edit {
		display: flex;
		align-items: center;
		color: #2c2c2c;
		font-size: 18px;
		vertical-align: -1px;
		margin-right: 20rpx;
	}

	.acea-row .delete {
		display: flex;
		align-items: center;
		color: #2c2c2c;
		font-size: 18px;
		vertical-align: -1px;
		margin-right: 5px;
	}

	.acea-row .font {
		font-size: 13px;
	}
</style>